<template>
  <div class="home">
    <p>
      <el-button type="primary" icon="el-icon-circle-close" @click="goout();logout()"  v-if="this.$store.state.isLogin">登出</el-button>
    </p>
    <p class="routitle">
        <router-link to="/userid">个人信息</router-link>
      </p>
    <div class="biaoti">  
                个人空间
    </div>
    
    <div class="list">
      <ul>
          <li class="title">
            <router-link class="title" to="/view" target="_blank" @click.native="go1">{{papertitle1}}</router-link>
          </li>
            <div class="wenzhang">
              {{abstract1}}
            </div>
          
          <li class="title">
            <router-link class="title" to="/view" target="_blank" @click.native="go2">{{papertitle2}}</router-link>
          </li>
            <div class="wenzhang">
              {{abstract2}}
            </div>

          <li class="title">
            <router-link class="title" to="/view" target="_blank" @click.native="go3">{{papertitle3}}</router-link>
          </li>
            <div class="wenzhang">
              {{abstract3}}
            </div>

          <li class="title">
            <router-link class="title" to="/view" target="_blank" @click.native="go4">{{papertitle4}}</router-link>
          </li>
            <div class="wenzhang">
              {{abstract4}}
            </div>

          <li class="title">
            <router-link class="title" to="/view" target="_blank" @click.native="go5">{{papertitle5}}</router-link>
          </li>
            <div class="wenzhang">
              {{abstract5}}
            </div>
      </ul>
    </div>

    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        layout="prev, pager, next"
        :total="1000" >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import axios from 'axios';

export default {

  data(){
        return {
          userid:'',
          blog_id1:'',
          blog_id2:'',
          blog_id3:'',
          blog_id4:'',
          blog_id5:'',
          papertitle1: '龙蛋',
          papertitle2: '神们自己',
          papertitle3: '三体',
          papertitle4: '朝闻道',
          papertitle5: '乡村教师',
          abstract1: '5月22日，房山区14例，东城区7例，昌平区3例，西城区、朝阳区各2例，大兴区1例；重型1例，普通型14例，轻型66例，无症状感染者13例；管控人员77例，社会面筛查17例。均已转至定点医院隔离治疗，相关风险点位及人员已管控落位。5月22日，在北京市新型冠状病毒肺炎疫情防控工作第342场新闻发布会上，市疾控中心副主任刘晓峰介绍，5月22日0时至15时，新增本土新冠肺炎病毒感染者67例。自5月21日发布会后（5月21日15时至22日15时），新增本土新冠肺炎病毒感染者94例（感染者1538至1631），丰台区41例，海淀区24例，房山区14例，东城区7例，昌平区3例，西城区、朝阳区各2例，大兴区1例；重型1例，普通型14例，轻型66例，无症状感染者13例；管控人员77例，社会面筛查17例。均已转至定点医院隔离治疗，相关风险点位及人员已管控落位。5月22日，在北京市新型冠状病毒肺炎疫情防控工作第342场新闻发布会上，市疾控中心副主任刘晓峰介绍，5月22日0时至15时，新增本土新冠肺炎病毒感染者67例。自5月21日发布会后（5月21日15时至22日15时），新增本土新冠肺炎病毒感染者94例（感染者1538至1631），丰台区41例，海淀区24例，房山区14例，东城区7例，昌平区3例，西城区、朝阳区各2例，大兴区1例；重型1例，普通型14例，轻型66例，无症状感染者13例；管控人员77例，社会面筛查17例。均已转至定点医院隔离治疗，相关风险点位及人员已管控落位。5月22日，在北京市新型冠状病毒肺炎疫情防控工作第342场新闻发布会上，市疾控中心副主任刘晓峰介绍，5月22日0时至15时，新增本土新冠肺炎病毒感染者67例。自5月21日发布会后（5月21日15时至22日15时），新增本土新冠肺炎病毒感染者94例（感染者1538至1631），丰台区41例，海淀区24例，房山区14例，东城区7例，昌平区3例，西城区、朝阳区各2例，大兴区1例；重型1例，普通型14例，轻型66例，无症状感染者13例；管控人员77例，社会面筛查17例。均已转至定点医院隔离治疗，相关风险点位及人员已管控落位。',
          abstract2: '',
          abstract3: '硬科幻',
          abstract4: '软科幻',
          abstract5: '软科幻',
        } 
    },
  methods:{
      
      async allocauthor(){
        this.userid=this.$route.query.user_id;
        console.log('user_id：'+this.userid);
        let {data} = await this.$axios.post('http://localhost:8080/personBlog',{author_id:this.userid});
        localStorage.setItem("b1",data.data[0]);
        localStorage.setItem("b2",data.data[1]);
        localStorage.setItem("b3",data.data[2]);
        localStorage.setItem("b4",data.data[3]);
        localStorage.setItem("b5",data.data[4]);
      },
      async alloc(){
        var fir =localStorage.getItem("b1");
        let {data} = await this.$axios.post('http://localhost:8080/selectBlog',{blog_id:fir});
        console.log(this.$store.state.blog_id1);
        this.data=data;
        console.log(data);
        this.abstract1=data.data.article;
        this.papertitle1=data.data.title;
        this.blog_id1=fir;  
      },
      async alloc2(){
        var fir =localStorage.getItem("b2");
        let {data} = await this.$axios.post('http://localhost:8080/selectBlog',{blog_id:fir});
        this.data=data;
        //console.log(this.data.title);
        this.abstract2=data.data.article;
        this.papertitle2=data.data.title;
        this.blog_id2=fir;
        
      },
       
      async alloc3(){
        var fir =localStorage.getItem("b3");
        let {data} = await this.$axios.post('http://localhost:8080/selectBlog',{blog_id:fir});
        this.data=data;
        //console.log(this.data.title);
        this.abstract3=data.data.article;
        this.papertitle3=data.data.title;
        this.blog_id3=fir;
        
      },
        
      async alloc4(){
        var fir =localStorage.getItem("b4");
        let {data} = await this.$axios.post('http://localhost:8080/selectBlog',{blog_id:fir});
        this.data=data;
        //console.log(this.data.title);
        this.abstract4=data.data.article;
        this.papertitle4=data.data.title;
        this.blog_id4=fir;
        
      },
        
      async alloc5(){
        var fir =localStorage.getItem("b5");
        let {data} = await this.$axios.post('http://localhost:8080/selectBlog',{blog_id:fir});
        this.data=data;
        //console.log(this.data.title);
        this.abstract5=data.data.article;
        this.papertitle5=data.data.title;
        this.blog_id5=fir;
        
      },
      async search(){
        var searchin = this.input_search;
        let {data} = await this.$axios.post('http://localhost:8080/personSearch',{content:searchin,author:'测试用户'});
        console.log(data);
      },
      go1(){
        this.$store.commit('changeid',this.blog_id1);
        //this.$store.state.blog_id=this.blog_id1;
      },
      go2(){
        //this.$store.dispatch('change_id',this.blog_id2);
        this.$store.commit('changeid',this.blog_id2);
        //this.$store.state.blog_id=this.blog_id2;
        //alert(this.$store.state.blog_id);
      },
      go3(){
        this.$store.commit('changeid',this.blog_id3);
        //this.$store.state.blog_id=this.blog_id3;
      },
      go4(){
        this.$store.commit('changeid',this.blog_id4);
        //this.$store.state.blog_id=this.blog_id4;
      },
      go5(){
        this.$store.commit('changeid',this.blog_id5);
        //this.$store.state.blog_id=this.blog_id5;
      },
      logout(){
        this.$store.commit('Logout');
        
      },
      goout(){
        this.$router.push('/login');
      }
    },
  
  created() {       //渲染前阶段
      this.allocauthor();
      this.alloc();
      this.alloc2();
      this.alloc3();
      this.alloc4();
      this.alloc5();
  }
  
}
</script>

<style lang="scss" scoped>
*{
  margin:10px;
  padding:10px;
}
.home{
  border:2px solid rgb(90, 189, 251, 0.295);
  background:rgba(90, 189, 251, 0.442);
  width:1400px;
  margin:auto;
  border-radius: 10px;  /* 边框四个角的弧度  */
  .biaoti{
    font-family: "Times New Roman", cursive, serif, sans-serif;
    width: 250px;
    height: 80px;
    //border: 1px solid rgb(90, 189, 251, 0.295);
    margin:auto;
    font-size: 60px;
    color:rgba(0, 0, 0, 0.745);
    font-weight: bold;
  }
  .search{
    border-radius: 10px;  /* 边框四个角的弧度  */
    width:1280px;
    height:75px;
    background: rgba(195, 139, 217, 0.686);
    font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
    font-weight: bolder;
    font-size: 25px;
    margin:auto;
  }
  input{
    
    width:950px;
    height:35px;
  }
  .list{
    background:rgba(255, 255, 255, 0);
    
  }
  .routitle{
        font-weight: bolder;
        font-size: 20px;
        text-align: right;
        //margin:auto;
  }
  .title{
    //width:1400px;
    height:35px;
    //background:rgb(255, 255, 255);
    font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
    font-weight: bolder;
    font-size: 30px;
    color:rgba(215, 83, 7, 0.656);
  }
  .wenzhang{
    margin:auto;
    //background:rgba(255, 255, 255, 0);
    border:2px solid rgb(32, 92, 102);
    font-family: "宋体", cursive, serif, sans-serif;
    //font-weight: bolder;
    font-size: 20px;
    clear: both; /* 清除左右浮动 */
    width:1250px;
    border-radius: 10px;  /* 边框四个角的弧度  */
    word-break: break-word; /* 文本行的任意字内断开 */
    word-wrap: break-word; /* IE */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap; /* HP printers */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  }
  .block{
    position:relative;
    left:500px;       
    top:0px;
    width:1400px;
    height:70px;
    font-size: 20px;
    
  }
  .searchbot{
    
    //background:rgba(255, 255, 255, 0);
    font-family: "宋体", cursive, serif, sans-serif;
    font-weight:900;
    font-size: 20px;
    color:rgba(0, 0, 0, 0.851);
  }
}

</style>

